<template>
  <div>
    <nav-header :headerTitle="'流量主认证'" :navBgColor="'#fff'"></nav-header>
    <section class="page" v-show="show.pageShow">
      <div class="fail" v-if="show.type == 'fail'">
        <div class="header">
          <div class="null65"></div>
          <img src="@/assets/images/name_icon_fail.png" alt />
          <div class="null39"></div>
          <div>您好，只有完成流量主认证</div>
          <div class="null6"></div>
          <div>才能完成任务赚钱</div>
        </div>
        <div class="section">
          <div class="null68"></div>
          <div class="s-content">
            <div class="null68"></div>
            <div class="c-weight">请添加平台管理员微信，为您免费认证</div>
             <div class="null6"></div>
            <div class="c-weight">并开通接广告权限</div>
            <div class="null68"></div>
            <div class="c-font">说明：您需要向管理员提供微信通讯录人数</div>
            <div class="c-font">
              <span class="c-red">截图</span>，管理员确认您的好友
              <span class="c-red">大于200</span>
            </div>
            <div class="c-font">将立即为您开启接广告权限。</div>
            <div class="null68"></div>
            <div class="c-red">管理员微信：{{show.adminWxNum}}</div>
          </div>
        </div>
        <div class="footer">
          <div class="f-btn" @click="success" :data-clipboard-text="show.adminWxNum">复制管理员微信</div>
        </div>
      </div>
      <div class="success" v-else-if="show.type == 'success'">
        <div class="null280"></div>
        <img src="@/assets/images/name_icon_yes.png" alt />
        <div class="null39"></div>
        <div>恭喜您，您的流量主认证申请已审核通</div>
        <div>过，快去完成任务赚钱吧！</div>
      </div>
    </section>
  </div>
</template>

<script>
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "realname",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {
        pageShow: false,
        adminWxNum: "无",
        type: "",
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer")
      }
    };
  },
  created() {},
  mounted() {
    let query = this.$route.query ;
    if(query.uniqueId){
      this.show.uniqueId = query.uniqueId ;
    }
    this.init();
  },
  methods: {
    init: function() {
      this.params = {
        uniqueId: this.show.uniqueId
      };
      this.$http.post("user/getUserInfo", this.params).then(
        res => { 
          this.show.pageShow = true;
          res = res.data;
          // 流量主转发广告资格状态 0-不能转发 1-能转发
          if (!res.forwardAdStatus  ) {
            this.show.type = "fail";
            this.adminWxNum();
          } else{
            this.show.type = "success";
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    adminWxNum() {
      this.$http.post("soft/getWapConfig", {}).then(
        res => { 
          
          let wapConfig = res.data ;  
          this.show.adminWxNum = wapConfig.adminWxNum;
        },
        err => {
          console.log(err);
        }
      ); 
    },
    success() {
      this.copy(".f-btn");
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    border-bottom: 2px solid rgba(237, 237, 237, 1);
  }
  .null6 {
    width: 100%;
    height: 6px;
  }
  .null16 {
    width: 100%;
    height: 16px;
  }
  .null39 {
    width: 100%;
    height: 39px;
  }
  .null68 {
    width: 100%;
    height: 48px;
  }
  .null65 {
    width: 100%;
    height: 65px;
  }
  .null280 {
    width: 100%;
    height: 280px;
  }
  .null323 {
    width: 100%;
    height: 323px;
  }
  .null660 {
    width: 100%;
    height: 460px;
  }
  .fail {
    background: rgba(248, 249, 251, 1);
    position: fixed;
    top: 86px;
    left: 0;
    right: 0;
    bottom: 0;
    .header {
      width: 100%;
      height: 433px;
      background: rgba(255, 255, 255, 1);
      text-align: center;
      img {
        width: 206px;
        height: 186px;
      }
      div {
        width: 100%;
        font-size: 34px;
        font-family: PingFangSC-Semibold;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
      }
    }
    .section {
      width: 100%;
      .s-content {
        width: 686px;
        margin: auto;
        height: 456px;
        background: rgba(255, 255, 255, 1);
        border-radius: 24px;
        div {
          width: 100%;
          text-align: center;
        }
        .c-weight {
          font-size: 34px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(48, 49, 51, 1);
        }
        .c-font {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 49, 51, 1);
        }
        .c-red {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(255, 37, 37, 1);
        }
      }
    }
    .footer {
      width: 100%;
      position: fixed;
      left: 0px;
      bottom: 16px;
      .f-btn {
        width: 562px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        margin: auto;
        background: rgba(255, 37, 37, 1);
        border-radius: 44px;
        font-size: 34px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  .success {
    text-align: center;
    img {
      width: 206px;
      height: 186px;
    }
    div {
      width: 100%;
      font-size: 34px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(48, 49, 51, 1);
    }
  }
}
</style>
